<!-- 购物车(只显示当前站点) -->
<template>
	<view class="page">
		<!-- 管理 -->
		<view class="manage-placeholder">
			<view class="manage">
				<button class="btn btn-transition-scale9" @click="handleChangeState()">
					{{useShoppingCart.isShowDelete? '完成': '管理'}}
				</button>
			</view>
		</view>

		<!-- 购物车列表 -->
		<CartList></CartList>
		<!-- 底部 -->
		<bottomOperation></bottomOperation>
	</view>
</template>

<script setup>
	import { useShoppingCartStore } from './store.js';
	import CartList from './components/cart-list.vue';
	import bottomOperation from './components/bottom-operation.vue';

	const useShoppingCart = useShoppingCartStore();

	// 切换状态
	const handleChangeState = () => {
		useShoppingCart.SET_TOGGLE_DELETE();
	}
</script>

<style lang="scss" scoped>
	.manage-placeholder {
		height: 90rpx;

		.manage {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			height: inherit;
			background-color: #f5f5f5;
			text-align: right;

			.btn {
				height: inherit;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
				line-height: 90rpx;
				padding: 0 34rpx;
				background-color: transparent;
			}
		}
	}
</style>